<template>
    <div class="main" style="margin-bottom: 20px;margin-top:  20px;">
        <div>
            <el-form
            :model="queryParams"
            ref="elForm"
            size="small"
            style="padding-left: 2%;"
            :inline="true"
            label-width="auto"
            >
                <el-form-item label="设备mac:" prop="mac">
                    <el-input
                        v-model="queryParams.mac"
                        placeholder="请输入mac地址"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="异常信息:" prop="devExInfo">
                    <el-input
                        v-model="queryParams.devExInfo"
                        placeholder="请输入异常信息"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="查看状态" prop="isViewed">
                    <el-select
                        v-model="queryParams.isViewed"
                        placeholder="查看状态"
                        clearable
                    >
                        <el-option label="已查看" value=true></el-option>
                        <el-option label="未查看" value=false></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发生时间" prop="occurTime">
                    <el-date-picker
                    v-model="queryParams.occurTime"
                    type="datetime"
                    placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="" prop="">
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleSearch"
                        >搜索</el-button
                    >
                    <el-button icon="el-icon-refresh" size="mini" @click="resetForm"
                        >重置
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table 
            :data="devExList"
            >
            <el-table-column label="id" prop="id" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="mac地址" prop="mac" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="设备类型" prop="devType" align="center" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
                <span v-if="scope.row.devType == 66">插座</span>
            </template>
            </el-table-column>
            <el-table-column label="异常信息" prop="devExInfo" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="是否已被查看" prop="isViewed" align="center" :show-overflow-tooltip="true" >
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.isViewed == 1">已查看</el-tag>
                    <el-tag type="info" v-if="scope.row.isViewed == 0">未查看</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="异常发生时间" prop="occurTime" align="center" :show-overflow-tooltip="true" />
            </el-table>
            
        </div>
        <div>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getListByRq"
            />
        </div>
    </div>
</template>
<script>
import {getListByRq} from "../../../../api/alm/dev-exception/dev-exception";
export default {
    name: "Index",
    data() {
        return {
            devExList:[],
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                occurTime: [new Date(new Date()),new Date(new Date())]
            },
        }
    },
    mounted() {
        this.getListByRq()
        // const timer = window.setInterval(() => {
        //     setTimeout(() => {
        //         this.getListByRq()
        //     }, 0)
        // }, 30000)
        // // 清除定时器
        // this.$once('hook:beforeDestroy', () => {
        //     clearInterval(timer)
        // })
    },
    methods: {
        //点击按钮切换页面
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage; //每次点击分页按钮，当前页发生变化
            this.getListByRq()
        },
        handleSearch() {
            console.log(this.queryParams)
            this.getListByRq()
        },
        resetForm() {
            this.dateRange = []
            this.queryParams.pageNum = 1
            this.getListByRq()
        },
        getListByRq() {
            let _this = this;
            let obj = _this.queryParams
            obj.occurTime = Date.parse(obj.occurTime)
            obj.occurTime = obj.occurTime / 1000
            // console.log(_this.queryParams)
            getListByRq(obj).then(res => {
                // console.log(_this.queryParams)
                _this.devExList = res.rows
                _this.devExList.forEach((item) => {
                    item.occurTime = _this.timestampToTime(item.occurTime)
                })
            _this.total = res.total
            })
        },
        //年-月-日 时:分:秒
        timestampToTime(timestamp) {
            let date = new Date(timestamp * 1000) // 时间戳为10位需*1000，13位不需*1000
            let yy = date.getFullYear()
            let mm = this.addZero(date.getMonth() + 1)
            let dd = this.addZero(date.getDate())
            let hh = this.addZero(date.getHours())
            let mf = this.addZero(date.getMinutes())
            let ss = this.addZero(date.getSeconds())  
            return `${yy}-${mm}-${dd} ${hh}:${mf}:${ss}`
        },
        //判断时间小于10前面加0
        addZero(str) {
            return str < 10 ? '0' + str : str
        },
    }
}
</script>